<template>
  <qf-card
    className="userCreate"
    title="用户创建"
    btnTitle="返回"
    btnUrl="/user"
  >
    <qf-form :width="80" :formItem="formItem" :formBtns="formBtns"></qf-form>
  </qf-card>
</template>

<script>
import { postUserApi } from "@/api/user";

export default {
  data() {
    // 1 验证规则
    const checkMobile = (rule, value, callback) => {
      if (/^1\d{10}$/.test(value)) {
        callback();
      } else {
        callback(new Error("手机格式有误"));
      }
    };
    // 2 返回数据
    return {
      // 表单配置
      formItem: [
        // ...
        {
          label: "手机号",
          rules: [
            { required: true, message: "手机号必须", trigger: "blur" },
            { validator: checkMobile, trigger: "blur" },
          ],

          field: "mobile",

          placeholder: "请输入手机号",
          type: "input",
        },
        {
          label: "账号",
          rules: [
            { required: true, message: "账号必须", trigger: "blur" },
            { min: 2, max: 20, message: "账号至少2-20个字符", trigger: "blur" },
          ],
          field: "username",

          placeholder: "请输入账号",
          type: "input",
        },
        {
          label: "密码",
          rules: [{ required: true, message: "密码必须", trigger: "blur" }],
          field: "password",

          placeholder: "请输入密码",
          type: "password",
        },
        {
          label: "密保问题",
          field: "question",
          rules: [
            { required: true, message: "请选择密保问题", trigger: "change" },
          ],

          placeholder: "请输入密保问题",
          type: "select",
          payload: [
            { label: "你大爷名字", value: "你大爷名字" },
            { label: "您其中唯一讲师的名字", value: "您其中唯一讲师的名字" },
            { label: "你初念的名字", value: "你初念的名字" },
          ],
        },
        {
          label: "密保答案",
          rules: [{ required: true, message: "密保答案必须", trigger: "blur" }],
          field: "answer",

          placeholder: "请输入密保答案",
          type: "input",
        },
        // ...
      ],
      // 表单按钮组
      formBtns: [
        {
          content: "创建",
          type: "primary",
          click: async (formData) => {
            console.log("表单数据", formData);
            const res = await postUserApi(formData);
            if (res.meta.state === 201) {
              this.$message.success(res.meta.msg);
              this.jump("/user");
            } else {
              this.$message.error(res.meta.msg);
            }
          },
        },
        {
          content: "重置",
          type: "",
        },
      ],
    };
    // ....
  },
};
</script>

<style></style>
